<template>
	<section class='page__admin-manage'>
		<header class="page__header">
			<h2 class="page__title">
				用户管理
			</h2>
			<el-button
				size="mini"
				type="primary"
				@click="createUser"
			>
				创建用户
			</el-button>
		</header>
		<div class="page__main">
			<div class="operate-bar">
				<div class="bar-main">
					<el-input
						v-model="form.keyword"
						@keyup.enter.native="search"
						style="width: 260px"
						size="small"
						placeholder="请输入关键词">
						<i
							slot="suffix"
							class="el-input__icon el-icon-search"
							@click="search"
						></i>
					</el-input>
				</div>
				<div class="bar-sub">
					<p>{{form.keyword}}</p>
				</div>
			</div>
			<el-table
				:data="tableData"
				v-loading="loading"
				:stripe="true"
				style="width: 100%">
				<el-table-column
					prop="id"
					label="ID"
					width="75">
				</el-table-column>
				<el-table-column
					prop="username"
					label="用户名"
				>
				</el-table-column>
				<el-table-column
					prop="gender"
					label="性别"
					width="60px"
				>
					<template slot-scope="prop">
						{{GENDER_MAP[prop.row.gender]}}
					</template>
				</el-table-column>
				<el-table-column
					prop="birthday"
					label="生日"
					width="110px"
				>
				</el-table-column>
				<el-table-column
					prop="email"
					label="邮箱"
					:show-overflow-tooltip="true"
				>
				</el-table-column>
				<el-table-column
					prop="phone"
					label="手机号码">
				</el-table-column>
				<el-table-column
					prop="address"
					label="地址"
					:show-overflow-tooltip="true"
				>
				</el-table-column>
				<el-table-column
					label="状态"
					width="75px"
				>
					<template slot-scope="prop">{{USER_STATUS_MAP[prop.row.isAvailable]}}</template>
				</el-table-column>
				<el-table-column
					label="角色"
					width="90px"
				>
					<template slot-scope="prop">{{ROLE_MAP[prop.row.role]}}</template>
				</el-table-column>
				<el-table-column
					label="创建时间"
					prop="createTime"
					:show-overflow-tooltip="true"
				>
				</el-table-column>
				<el-table-column
					label="更新时间"
					prop="updateTime"
					:show-overflow-tooltip="true"
				>
				</el-table-column>
				<el-table-column
					label="操作"
					fixed="right"
					width="80px"
				>
					<template slot-scope="prop">
						<el-button
							type="warning"
							size="mini"
							@click="editUser(prop.row)"
						>编辑
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				:hide-on-single-page="true"
				layout="prev, pager, next"
				@current-change="changePage"
				:total="total">
			</el-pagination>
		</div>
		<manage-edit/>
	</section>
</template>

<script>
  /**
   *
   *
   *
   */
  import ManageEdit from './edit'
  import * as CONSTANT from '../../config/constant'

  export default {
    name: "manage",
    data() {
      return {
        ...CONSTANT,
        form: {
          page: 1,
          size: 10,
          keyword: ''
        },
        total: 0,
        tableData: [],
        loading: false
      }
    },
    mounted() {
      this.search()
      this.$bus.$on('user-edit__success', () => {
        this.getList()
      })
    },
    methods: {
      search() {
        this.form.page = 1
        this.getList()
      },
      changePage(page) {
        this.form.page = page
        this.getList()
      },
      async getList() {
        this.loading = true
        let tableData = [],
          total = 0
        await this.$axios.get('/user/list', {
          params: this.form,
          abort: true
        }).then(({success, data}) => {
          if (success) {
            tableData = data.content
            total = data.total
          }
        }).catch(thrown => {
          // if (axios.)
        }).finally(() => {
          this.loading = false
        })
        this.tableData = tableData
        this.total = total
      },
      createUser() {
        this.$bus.$emit('user-edit', null)
      },
      editUser(row) {
        this.$bus.$emit('user-edit', row)
      }
    },
    components: {
      ManageEdit
    }
  }
</script>

<style lang='less'>

</style>
